<template>
  <view class="container-withdrawal">
    <header @click="$goPath(1)">
      <image src="/static/images/right-white.png" mode='aspectFit|aspectFill|widthFix' alt="" />
      <view>提现</view>
    </header>

    <section>
      <view class="sect-box">
        <view class='head-availableBalance'>
          <view>可提现金额(元)</view>
          <view>￥<text>{{ userDetail.availableBalance }}</text></view>
        </view>

        <view class='sect-card'>
          <view>提现金额(元)</view>
          <view>
            <text>￥</text>
            <input type="number" v-model="price" @input="onInputValue($event)">
            <view @click="handleAll()" style="color: #32B499; paddingBottom: 5px; boxSizing: border-box">全部提现</view>
          </view>
          <view>
            <view>手续费5%</view>
            <view>实际到账:{{ realityPrice }}</view>
          </view>
          <view v-if="isAuthenticate">提现到{{ authenticateInfo.bankCardNo }}银行卡</view>
          <view v-else @click="$goPath(2,'/pagesA/pocketShop/mine/auth')">您还没有实名认证，快去认证吧</view>
        </view>

        <view class='sect-title'>提现说明</view>
        <view class='sect-info'>
          <view>1、提现手续费5%，手续费最低1元</view>
          <view>2、申请提现后24小时到账</view>
          <view>3、若遇到充值未到账，请联系客服，客服电话:<text @click="handleCall()">4009915775</text> </view>
          <view>4、提现金额需要为10的整数倍</view>
          <view>5、首次提现需要进行实名认证并填写提现银行卡号</view>
        </view>
        <view class='sect-btn'>
          <view>
            <view @click="goBills()">提现记录</view>
            <view @click="handleSubmit()">确认提现</view>
          </view>
        </view>

      </view>
    </section>

  </view>
</template>
<script>
import { getUserInfo } from '@/common/auth';
export default {
  data() {
    return {
      userDetail: {},
      visiable: false,
      price: 0,
      realityPrice: '0.00',
      isAuthenticate: false,
      authenticateInfo: {},
    }
  },
  onShow() {
    this.getUserDetail();
  },
  methods: {

    //获取个人信息
    async getUserDetail() {
      let userInfo = getUserInfo()
      this.$request.userInformation({ userId: userInfo.userId }).then(res => {
        const { code, isSuccess, data } = res;
        if (code == 200 && isSuccess) {
          data.availableBalance = data.availableBalance.toFixed(2);
          this.userDetail = data;
          uni.setStorageSync('userDetail', data);
          this.getAuthenticate(data);
          this.getAuthenticateInfo(data);
        };
      });
    },

    //查询认证结果 0未认证 1认证
    async getAuthenticate(userDetail) {
      await this.$request.userAuthenticate({ userId: userDetail.userId }).then(res => {
        if (res.code == 200 && res.isSuccess) {
          this.isAuthenticate = res.data != 1 ? false : true;
        }
      });
    },

    //查询认证数据
    async getAuthenticateInfo(userDetail) {
      await this.$request.userBankAuthenticate({ userId: userDetail.userId }).then(res => {
        if (res.code == 200 && res.isSuccess) {
          if (res.data) {
            res.data.bankCardNo = `${res.data.bankCardNo.substring(0, 4)}*******${res.data.bankCardNo.substring(res.data.bankCardNo.length - 4)}`
            this.authenticateInfo = res.data;
          }
        }
      });
    },


    //输入提现金额
    onInputValue(e) {
      const { userDetail, price } = this;

      if (Number(price) <= userDetail.availableBalance) {
        if (!Number.isNaN(Number(price))) {
          if (Number(price) == 10) {
            this.realityPrice = '9.00';
          } else {
            this.realityPrice = (Number(price) - Number(price * 0.05))?.toFixed(2);
          }
        }
      } else {
        this.price = userDetail.availableBalance;
        this.realityPrice = (Number(userDetail.availableBalance) - Number(userDetail.availableBalance * 0.05))?.toFixed(2);
      }
    },

    //全部提现
    handleAll() {
      const { userDetail } = this;
      this.price = userDetail.availableBalance;
      this.realityPrice = (Number(userDetail.availableBalance) - Number(userDetail.availableBalance * 0.05))?.toFixed(2);
    },

    //打电话给客服
    handleCall() {
      uni.makePhoneCall({
        phoneNumber: '4009915775'
      });
    },

    //提现记录
    goBills() {
      uni.navigateTo({ url: '/pagesA/pocketShop/mine/bills?billsType=withdrawal' });
    },

    //确认提现
    handleSubmit() {

      const { isAuthenticate, authenticateInfo, price, realityPrice, userDetail } = this;

      if (!isAuthenticate) {
        return this.$toast('请先去进行认证！');
      } else {
        const detail = {
          money: price,
          bankCard: authenticateInfo.bankCardNo.substring(authenticateInfo.bankCardNo.length - 4, authenticateInfo.bankCardNo.length),
          serviceCharge: Number(price - realityPrice).toFixed(2),
        }

        if (!price) {
          this.$toast('请输入提现金额!')
        } else if (price < 10) {
          this.$toast('提现金额不能小于10元!')
        } else if (!Number.isInteger(Number(price / 10))) {
          this.$toast('提现金额只能是10的整数倍!')
        } else {
          // if(userId == 1244) {
          //   uni.showToast({ title: '业绩未完成，请联系公司', icon: 'none' });
          //   return;
          // }
          const param = { amount: price, userId: userDetail.userId }
          this.$request.userWithdraw(param).then(res => {
            if (res.code == 200 && res.isSuccess) {
              uni.showToast({ title: '提现成功，预计24小时内到账', icon: 'success' });
              uni.navigateTo({ url: `/pagesA/pocketShop/mine/withdrawalSuccess?detail=${JSON.stringify(detail)}` });
            } else {
              this.$toast(res.msg)
            }
          });
        }
      }
    }


  },

}
</script>
<style scoped lang="scss">
.container-withdrawal {
  width: 100%;
  height: 100vh;
  font-size: 14px;
  font-family: 'PingFang SC-Medium';
  background-color: #FED14E;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  position: relative;

  header {
    width: 100%;
    padding: 60px 12px 30px;
    border-radius: 0 0 20px 20px;
    box-sizing: border-box;
    color: #fff;
    background-color: #32B499;
    background-image: url('https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/homeTopIcon.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    font-size: 18px;
    font-family: 'PingFang SC-Bold';
    display: flex;
    align-items: center;

    image {
      width: 16rpx;
      height: 28rpx;
      display: block;
      margin-right: 12rpx;
    }
  }

}




section {
  height: 100%;
  position: relative;
  top: -25px;
  padding: 0 12px;
  box-sizing: border-box;

  .sect-box {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 20px;
    padding: 12px;
    box-sizing: border-box;
    overflow-y: auto;

    .head-availableBalance {
      view:last-child {
        margin-top: 12px;
        font-size: 20px;
        color: #32B499;
      }

      view:last-child {
        text {
          font-family: 'DIN-Bold';
          font-size: 24px;
        }
      }
    }


  }
}

.container-withdrawal .sect-card {
  margin-top: 12px;
  background-color: #fff;
  border-radius: 8px;
  color: #333333;
  box-shadow: 2px 4px 4px 0px rgba(50, 180, 153, 0.12);
  padding: 12px;
  box-sizing: border-box;
}

.container-withdrawal .sect-card>view:nth-child(2) {
  display: flex;
  margin-top: 12px;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(241, 241, 241, 0.8);
}

.container-withdrawal .sect-card>view:nth-child(2) text {
  font-size: 20px;
}

.container-withdrawal .sect-card>view:nth-child(2) input {
  flex: 1;
  font-size: 30px;
  font-family: 'DIN-Bold';
  line-height: 0;
}

.container-withdrawal .sect-card>view:nth-child(2) input::placeholder {
  font-size: 16px;
}

.container-withdrawal .sect-card>view:nth-child(2) input::-webkit-input-placeholder {
  /* 使用webkit内核的浏览器 */
  font-size: 16px;
}

.container-withdrawal .sect-card>view:nth-child(2) input:-moz-placeholder {
  /* Firefox版本4-18 */
  font-size: 26px;
}

.container-withdrawal .sect-card>view:nth-child(2) input::-moz-placeholder {
  /* Firefox版本19+ */
  font-size: 16px;
}

.container-withdrawal .sect-card>view:nth-child(2) input:-ms-input-placeholder {
  /* IE浏览器 */
  font-size: 16px;
}

.container-withdrawal .sect-card>view:nth-child(3) {
  width: 100%;
  display: flex;
  justify-content: space-between;
  color: #EA5F5F;
  font-size: 12px;
  margin-top: 5px;
  margin-bottom: 10px;
}

.sect-title {
  font-size: 16px;
  width: 100%;
  margin: 12px 0;
}

.sect-info {
  font-size: 14px;
  font-family: 'PingFang SC-Regular';
}

.sect-info text {
  color: #32B499;
  font-family: 'PingFang SC-Medium';
}

.container-withdrawal .sect-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 5%;
  left: 0;
}

.container-withdrawal .sect-btn>view {
  width: 90%;
  height: 40px;
  color: #fff;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
  background-color: #32B499;
}

.container-withdrawal .sect-btn>view>view {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container-withdrawal .sect-btn>view>view:first-child {
  border-right: 1px solid #fff;
}
</style>
